import React, { useState } from 'react';

interface TipsProps {
	text?: string;
	onClose?: () => void;
	onScale?: () => void;
	onInteract?: (value: boolean) => void;
}
const Tips = (props: TipsProps) => {
	const { text = '', onClose, onScale, onInteract } = props;
	const [interactable, setInteract] = useState(false);

	const onClick = () => {
		console.log('onClick ', interactable);
		setInteract(!interactable);
		onInteract && onInteract(!interactable);
	}
	return (
		<div className="sync-screen-tips" id="sync-screen-tips-container">
			<div className="contents">
				<svg className="widget-icon" aria-hidden="true" onClick={onScale}>
					<use xlinkHref="#icon-widget-chuangkousuoxiao"></use>
				</svg>
				<span>{text}</span>
				<span className={interactable ? 'button button-uninteractable': 'button button-interactable'} onClick={onClick}></span>
				{/* <svg className="widget-icon" aria-hidden="true">
					<use xlinkHref=""></use>
				</svg> */}
			</div>
		</div>
	);
};

export default Tips;
